<template>
	<view class="bg-gray foodappoint">
		<view class="wrapper width">
			<carousel :res="carouselImage" class="bgshare" height='340' />
		</view>
		<view class="flex-row-start flex-top main width">
			<view class="navs">
				<view class="nav-item" 
				:class="tabIndex == index ? 'cur' : ''"
				@click="chooseType(item,index)"
				v-for="(item,index) in navs"
				>{{item.name}}</view>
			</view>
			<view class="content">
				<view  class="listitem flex-row-between" v-for="(item,index) in list"
				v-if='item.recipeId == typeId'
				:key='index'  
			 >
					<image :src="item.images" class="bg" mode="aspectFill"></image>
					<view class="info">
						<view class="title color2 font14 bold">{{item.dishName}}</view>
						<view class="jieshao font12 color9">
							{{item.remarks}}
						</view>
						<view class="flex-row-between">
							<view class="price yellow font16">￥<!-- {{item.dishPrice}} -->0</view>
							<u-number-box
							inputWidth='40'
							v-model="item.num" @input="ChangeItem"></u-number-box>
							<!-- <view class=" yellow font14">开放</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submitbtn flex-row-between">
			<view class="price flex-row-start">
				<view class="shopbox" @click="show = true">
					<image src="https://www.haopengsong.xyz/static/food/shop.png" class="shop"></image>
					<u-badge type="error" :count="hasChoose.length" bgColor='#F25550' size='mini'></u-badge>
				</view>
				总计 
				<view class="yellow">¥<text class="font18">0</text></view>
			</view>
			<view class="yudin" @click="submit">去结算</view>
		</view>
		
		<u-popup v-model="show" mode="bottom" border-radius="24">
				<view class="contentpopup">
					<view class="top font15 flex-row-start">
						<image src="https://www.haopengsong.xyz/static/food/meau.png" class="icon"></image>
						已点菜品
					</view>
					<view class="box">
						<view class="flex-row-between foodlist" v-for='(item,index) in hasChoose' :key='index'>
							{{ item.dishName }}
							<u-number-box 
							inputWidth='40'
							v-model="item.num" 
							></u-number-box>
						</view>
					</view>
				</view>
			</u-popup>
	</view>
</template>

<script> 
import tpl_banner from "@/pages/tabbar/roperty/template/tpl_banner"; //导航栏模块
import storage from "@/utils/storage.js"; //缓存
import { getCategory,getDish } from "@/api/food";
export default {
	data() {
		return {
			value:2,
			show:false,
			tabIndex:0,
			list:[],
			total:0,
			typeId:1,
			hasChoose:[],//已选菜品
			carouselImage:[
				//{ name:'https://www.haopengsong.xyz/static/food/bg.png'}
				{ name:'https://www.haopengsong.xyz/static/food1.png'}
			],
			navs:[
				{ id:1,name:'热菜' },
				{ id:2,name:'汤品' },
				{ id:3,name:'凉菜' },
			]
		};
	},
	components: {
		carousel: tpl_banner
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		
	},
	/**
	 * 页面显示
	 */
	onShow() {
		this.getDishFun()
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	watch:{
		hasChoose(res){
			let total = 0
			res.map(i=>{
				total+=i.num*i.dishPrice
			})
			this.total = total
		}
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		//菜品数量
		ChangeItem(res){
			this.hasChoose = this.list.filter(v=>v.num > 0)
		},
		//菜品类别
		getCategoryFun(){
			 getCategory().then(res=>{
				 this.navs = res
				 this.getDishFun()
			 })
		},
		//菜品列表
		getDishFun(){
			 let data = {
				 recipeId:this.navs[this.tabIndex].id
			 }
			 getDish().then(res=>{
				 this.list = res.map(i=>{
					 i.num = 0
					 return i
				 })
			 })
		},
		jump(res){
			uni.navigateTo({
				url: res
			});
		},
		radioChange(){},
		chooseType(res,index){
			this.tabIndex = index
			this.typeId = res.id
			//this.getDishFun()
		},
		//去结算
		submit(){
			if(this.hasChoose.length == 0){
				uni.showToast({
					title: "你还未选择餐食，请选择",
					icon: "none",
					duration: 1500,
				});
				return false
			}
			let dishList = []
			this.hasChoose.map(i=>{
				dishList.push({
					dishName:i.dishName,
					id:i.id,
					price:i.num*i.dishPrice,
					num:i.num
				})
			})
			let data = {
				total:this.total,
				dishList:dishList
			}
			this.$store.commit('SET_FOOD',data)
			uni.navigateTo({
				url:'/pages/food/foodordersure'
			})
		}
	}
};
</script>

<style scoped lang="scss">
	.bg-gray{
		padding-bottom: 50px;
	}
	.submitbtn{
		.yellow{
			padding: 0 5px 0 10px;
		}
		width: 100%;
		position: fixed;
		bottom: 0px;
		left:0;
		background-color: #fff;
		box-shadow: 0px -2px 0px 1px #EEEEEE;
		padding: 8px 10px;
		.yudin{
			width: 124px;
			height: 40px;
			background-color: #499C43;
			text-align: center;
			line-height: 40px;
			color:#fff;
			border-radius: 40px;
			font-size: 16px;
		}
	}
	.listitem{
		margin-bottom: 15px;
		.bg{
			width: 95px;
			height: 95px;
		}
		.info{
			width: 60%;
		}
	}
	.boxbottom{
		border-radius: 12px;
		padding: 12px;
	}
	.jieshao{
		height: 44px;
		line-height: 22px;
		display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: normal;
		margin: 5px 0;
	}
	.navs{
		width: 23%;
	}
	.content{
		width: 77%;
		padding: 10px;
		background-color: #fff;
	}
	.nav-item{
		text-align: center;
		padding: 10px 0 12px;
	}
	.cur{
		background-color: #fff;
		color:#499C43;
	}
	.shopbox{
		width: 45px;
		height: 32px;
		position: relative;
		.shop{
			width: 32px;
			height: 32px;
		}
	}
	.foodlist{
		background-color: #fff;
		padding: 10px 12px;
		margin-bottom: 10px;
		border-radius: 12px;
	}
	.foodlist:last-child{
		margin-bottom: 0;
	}
	.main{
		margin-top: 20px;
	}
</style>